<template>
	<view class="page-section page-section-gap map-container">
		
		<map style="width: 100%; height: 90vh;" :style="{height:mapheight}" :show-location='true'
			:latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap"
			@callouttap='callouttap' @click="opentwo" @regionchange="regionchange" :include-points="points">
			<uni-popup ref="popup" type="center">
				<view class="popup-phone">
					<view class="phones">
						
						<view style="font-size: 30rpx;">{{info.name}}</view>
						<button class="cu-btn block bg-blue margin-tb-sm lg"  @click="daohang">
							导航
						</button>
					</view>

				</view>
			</uni-popup>
			<cover-view class="cover-view" :style='{bottom:coverbottom}' @click="onControltap">
				<cover-image class="cover-image" @click="play" src="../../static/xiche1.png"></cover-image>
				<cover-view>
					定位
				</cover-view>
			</cover-view>
		</map>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				latitude: 29.04956, //纬度  根据当前经纬度算的
				longitude: 111.67052, //经度
				//zhes 
				scale: 13, //缩放级别
				bottomData: false,
				marker:[],
				page:1,
				points:[],
				show:false,
				info:{
					name:'到这去?',
					la:29.04956,
					lo:111.67052
				}
			}
		},
		onLoad() {
			uni.showToast({
				title: '附近三方推荐',
				//将值设置为 success 或者直接不用写icon这个参数
				icon: 'loading',
				//显示持续时间为 2秒
				duration: 3000
			})  
			// uni.request({
			// 	url: 'https://restapi.amap.com/v3/ip?parameters',
			// 	method: 'GET',
			// 	data: {
			// 		key:'27f25054d7bf842f8b774ed9be6c1f69'
			// 	}
			// }).then((res)=>{
			// 	var rs = res
			// 	console.log(rs);
			// })
			
			
			var that = this
			//现在三个方案你选一个，做全国服务还是区域服务还是大城市服务
			uni.request({
				url: 'https://restapi.amap.com/v3/place/text',
				method: 'GET',
				data: {
					key: 'a60d366b284311e0f527c1d765452b32',
					keywords: '洗车',
					region: '常德市',
					
					offset:20,
					page_num:1
			
				},
				success(res) {
					var rs = res.data.pois
					// console.log(rs);
					
					for (var i = 0; i < rs.length; i++) {
						var pojo = {}
						pojo.id = i+1
						
						pojo.latitude = rs[i].location.split(",")[1]
						pojo.longitude = rs[i].location.split(",")[0]
						
						pojo.iconPath = rs[i].photos[0].url
						pojo.rotate = 0
						pojo.width = 20
						pojo.height = 30
						pojo.title = rs[i].name
						pojo.alpha = 0.5
						pojo.callout = { //自定义标记点上方的气泡窗口 点击有效  
							content: rs[i].address, //文本
							color: '#ffffff', //文字颜色
							fontSize: 14, //文本大小
							borderRadius: 15, //边框圆角
							borderWidth: '10',
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						}
						that.marker.push(pojo)
						
					
					}
					console.log(that.marker);
				}
			})
		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '500px'
					} else {
						data = '200px'
					}
				} else {
					data = '90vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '200rpx' //这些有影响吗
				} else {
					data = '100rpx'
				}
				return data
			},
			regionchange(event){
				console.log('regionchange', event)
			}
		},

		methods: {
			//地图点击事件
			markertap(e) {
				// console.log("===你点击了标记点===", e)
				this.latitude = e.detail.latitude
				this.longitude = e.detail.longitude
				console.log(e.detail.latitude +'11111111');
				console.log(this.latitude +'222222');
				this.$refs.popup.open('center')
			},
			//地图点击事件
			callouttap(e) {
				 console.log("===地图点击事件===", e)
				 var that = this
				 uni.openLocation({
				 	latitude: that.info.la,
				 	longitude: that.info.lo,
				 	name: that.info.name
				 });
			},
			daohang(){
				uni.openLocation({
					latitude: that.info.la,
					longitude: that.info.lo,
					name: that.info.name
				});
			}
		}
	}
</script>
<style lang='less' scoped>
	.map-container {
		position: relative;
		overflow: hidden;

		.cover-view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			color: #484848;
			background-color: #fff;
			background-size: 120rpx 120rpx;
			background-position: center center;
			position: absolute;
			bottom: 100rpx;
			right: 32rpx;
		}

		.cover-image {
			display: inline-block;
			width: 30rpx;
			height: 30rpx;
		}
	}
	.popup-phone {
		width: 600rpx;
		height: 250rpx;
		background-color: #fff;
		border-radius: 10px;
	
		.phones {
			padding: 20px;
		}
	
		.human {
			padding-left: 20px;
			height: 100rpx;
			line-height: 100rpx;
	
		}
	}
	
	.functionality2 {
		width: 25%;
		margin: 0;
		padding: 0;
		font-size: 12px;
		background-color: white;
		color: #6c757d;
		line-height: 1.8;
	}
	
	.functionality2::after {
		border: 0;
	}
</style>
